<template>
  <div class="common-layout__rank">
    <div>
      <el-radio-group v-model="channelId" @change="getRank">
        <el-radio-button label="1">全站</el-radio-button>
        <el-radio-button
          v-for="(channel, key) in store().channelList"
          :label="key"
          :key="key"
          >{{ channel.content }}
        </el-radio-button>
      </el-radio-group>
      <br />
      <el-radio-group v-model="type" @change="getRank">
        <el-radio-button label="daily">日榜</el-radio-button>
        <el-radio-button label="week">周榜</el-radio-button>
        <el-radio-button label="month">月榜</el-radio-button>
      </el-radio-group>
    </div>
    <div class="rank-video-list">
      <div v-for="(videoInfo, index) in videoList" :key="index">
        <VideoCard2 :video-info="videoInfo" :index="index"></VideoCard2>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref, onMounted } from "vue";
import VideoCard2 from "@/components/VideoCard2.vue";
import videoApi from "@/api/video.js";
import store from "@/store/store.js";
import { Video, VideoRankType } from "@/types/video";
import { loading } from "@/utils/common";

const videoList = ref<Array<Video>>([]);
const channelId = ref<number>(1);
const type = ref<VideoRankType>("daily");

const getRank = () => {
  const load = loading();
  let channelIdTmp = channelId.value == 1 ? null : channelId.value;

  videoApi.getRank(type.value, channelIdTmp, 100).then((res) => {
    if (res.data.code === 0) {
      videoList.value = res.data.data;
    }
    load.close();
  });
};

onMounted(() => {
  const load = loading();
  getRank();
  load.close();
});
</script>

<style lang="scss" scoped>
.common-layout__rank {
  & > div:first-child {
    text-align: left;
    margin-left: 16px;
  }
  .rank-video-list {
    display: grid;
    grid-template-columns: repeat(2, auto);
    width: 100%;

    & > div {
      margin: 15px;
    }
  }
}
</style>
